<template>
    <el-date-picker
      v-model="innerValue"
      type="datetimerange"
      unlink-panels
      range-separator="~"
      :shortcuts="shortcuts"
      :editable="false"
      :clearable="clearable"
      :prefix-icon="Calendar"
      value-format="YYYY-MM-DD HH:mm:ss"
      format="YYYY-MM-DD HH:mm:ss"
      :start-placeholder="placeholder"
      :end-placeholder="placeholder"
      :style="{ width: styleWidth, height: styleHeight }"
      @change="onChange"
    />
  </template>
  
  <script setup>
  import { computed } from "vue";
  import { Calendar } from "@element-plus/icons-vue";
  
  const props = defineProps({
    modelValue: { type: Array, default: null }, // ['2025-10-14 08:00:00', '2025-10-14 18:00:00']
    clearable: { type: Boolean, default: true },
    placeholder: { type: String, default: "选择日期时间范围" },
    styleWidth: { type: String, default: "260px" },
    styleHeight: { type: String, default: "28px" },
    shortcuts: {
      type: Array,
      default: () => [
        {
          text: "最近1小时",
          value: () => {
            const e = new Date();
            const s = new Date(e.getTime() - 1 * 60 * 60 * 1000);
            return [s, e];
          },
        },
        {
          text: "今日",
          value: () => {
            const n = new Date();
            const s = new Date(n.getFullYear(), n.getMonth(), n.getDate(), 0, 0, 0);
            const e = new Date(n.getFullYear(), n.getMonth(), n.getDate(), 23, 59, 59);
            return [s, e];
          },
        },
        {
          text: "近7天",
          value: () => {
            const e = new Date();
            const s = new Date(e.getTime() - 6 * 24 * 60 * 60 * 1000);
            return [s, e];
          },
        },
      ],
    },
  });
  
  const emits = defineEmits(["update:modelValue", "change", "normalized"]);
  
  const innerValue = computed({
    get: () => props.modelValue,
    set: (val) => {
      emits("update:modelValue", val);
      emits("change", val);
    },
  });
  
  function onChange(val) {
    if (!val || val.length !== 2) {
      emits("normalized", null);
      return;
    }
    const [start, end] = val;
    emits("normalized", [start, end]);
  }
  </script>
  
  <style scoped>
  /* ✅ 单输入框视觉样式 */
  :deep(.el-range-editor.el-input__wrapper) {
    padding: 0 10px;
  }
  :deep(.el-range-input) {
    text-align: center;
    pointer-events: none;
    color: var(--el-text-color-regular);
  }
  :deep(.el-range-separator) {
    margin: 0 6px;
    color: var(--el-text-color-placeholder);
  }
  </style>
  